<template>
  <section>
    <el-row>
      <el-button size="mini" @click="addTypeBtn" type="primary" icon="el-icon-plus"/>
    </el-row>
    <el-row>
      <el-table :data='typeList' v-if="typeList">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="类型名称">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.name"></el-input>
            <div v-show="!scope.row.edit">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column label="类型编码">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.code"></el-input>
            <div v-show="!scope.row.edit">{{scope.row.code}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="155">
          <template slot-scope="scope">
            <el-button v-if="scope.row.edit" size="mini" :type="scope.row.id?'primary':'success'" @click="confirm(scope)">{{scope.row.id?'保存':'新建'}}</el-button>
            <el-button size="mini" :type="scope.row.edit?'':'primary'" @click="editBtn(scope)">{{scope.row.edit?'取消':'编辑'}}</el-button>
            <el-button v-if="!scope.row.edit" @click='delBtn(scope)' size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </section>
</template>

<script>
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "stock-in",
    props:['typeList'],
    data(){
      return{
        stockInTypes:null
      }
    },
    created(){
      console.log('传来的列表-----------',this.typeList)
      //加载出入库类型表
      // this.getStockInTypes()
      // this.getStockOutTypes()
    },
    watch:{
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      addTypeBtn(){
        //添加新类型
        this.$emit('addType')
      },
      confirm(scope){
        console.log('保存还是新建---',scope.row)
        this.$emit('confirm',scope)
      },
      delBtn(scope){
        console.log('删除-----',scope)
        this.$confirm('确认删除？')
          .then(()=> {
            this.$emit('del',scope.row.id)
          })
          .catch(() => {
            this.$message({type:'info',message: '已取消删除'})
            this.loading = false
          })
      },
      editBtn(scope){
        if(scope.row.edit === undefined){
          Vue.set(scope.row,'edit',true)
          return
        }
        if(!scope.row.id){
          this.typeList.splice(scope.$index,1)
        }
        scope.row.edit =!scope.row.edit
      },
    }
  }
</script>

<style scoped>

</style>
